<!DOCTYPE html>
<html lang="ch-ZN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
<script src="./test.3e11d453.js"></script><script src="./iconfont.567aa3ef.js"></script></head>
<body>
  <link rel="stylesheet" href="./test.3e11d453.css">
  <link rel="stylesheet" href="./iconfont.567aa3ef.css">
  <div id="demo"></div>
  <style id="demo2"></style>
  <div class="hovers" id="hovers">
    <p id="tip">Click to open >></p>
  </div>
  <div class="macbook">
    <div class="inner">
      <div class="screen" id="screen">
        <div class="face-one">
          <div class="camera"></div>
          <div class="display">
            <div class="font">开始画一只小狗:</div>
            <div class="pouse" id="pause">播放状态：暂停</div>
            <div class="speed" id="speed">播放速度：正常</div>
            <div class="button">
              <button id="slow"><i class="iconfont icon-010kuaitui"></i></button>
              <button id="btnPause"><i class="iconfont icon-zanting1"></i></button>
              <button id="btnPlay"><i class="iconfont icon-bofang"></i></button>
              <button id="fast"><i class="iconfont icon-010kuaijin"></i></button>
            </div>
            <div class="shade"></div>
          </div>
        </div>
        <img src="http://www.clker.com/cliparts/i/s/H/f/4/T/apple-logo-white.svg" class="logo">
      </div>
      <div class="body" id="body">
        <div class="face-one">
          <div class="touchpad">
          </div>
          <div class="keyboard">
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key space"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
            <div class="key f"></div>
          </div>
        </div>
        <div class="pad one"></div>
        <div class="pad two"></div>
        <div class="pad three"></div>
        <div class="pad four"></div>
      </div>
    </div>
  </div>
  <div class="table" id="table"></div>
  <!-- 投影仪 -->
  <div id="projectorContainer">
    <div class="projectorLight">
    <div class="cover"></div>
    <div class="cover"></div>
    
  </div>
  <div class="host"></div>   
  <div class="projectorBody">
    <div class="lensHold"></div>
    <div class="lens"></div>
  </div>
 <div class="filmDisk" id="film1">
        <div class="fdBack">
            <div class="fdFilm"></div>
            <div class="fdBar"></div>
            <div class="fdBar2"></div>
            <div class="fdCover"></div>
        </div>
    </div>
      <div class="filmDisk" id="film2">
        <div class="fdBack">
            <div class="fdFilm"></div>
            <div class="fdBar"></div>
            <div class="fdBar2"></div>
            <div class="fdCover"></div>
        </div>
    </div>
  </div>
  <!-- 幕布 -->
  <div class="fileScreen">
    <div class="fileScreenFoot">
      <div class="fileScreenFootDown">
        <div class="fileScreenFootDown left"></div>
        <div class="fileScreenFootDown right"></div>
      </div>
    </div>
    <div class="fileScreenBody">
      <div class="fileScreenBodyUp"></div>
      <div class="fileScreenBodyDown"></div>
    <div class="main">
      <div class="bck1"></div>
      <div class="bck2"></div>
      <div class="dog">
        <div class="dog-paws">
          <div class="dog-bl-leg leg">
            <div class="dog-bl-paw paw"></div>
            <div class="dog-bl-top top"></div>
          </div>
          <div class="dog-fl-leg leg">
            <div class="dog-fl-paw paw"></div>
            <div class="dog-fl-top top"></div>
          </div>
          <div class="dog-fr-leg leg">
            <div class="dog-fr-paw paw"></div>
            <div class="dog-fr-top top"></div>
          </div>
        </div>
        <div class="dog-body">
          <div class="dog-tail"></div>
        </div>
        <div class="dog-head">
          <div class="dog-snout">
            <div class="dog-nose"></div>
            <div class="dog-eyes">
              <div class="dog-eye-l"></div>
              <div class="dog-eye-r"></div>
            </div>
          </div>
        </div>
        <div class="dog-head-c">
          <div class="dog-ear-l"></div>
          <div class="dog-ear-r"></div>
        </div>
      </div>
    </div>  
    </div>
    
  
  
  
  
  
  
  </div>
<script src="./main.1f19ae8e.js"></script>
<script>var hovers = document.getElementById("hovers");
var table = document.getElementById("table");
var sum = 1;

hovers.onclick = function scale() {
  sum += 1;
  var obj = document.getElementById("screen");
  var obj2 = document.getElementById("body");

  if (sum % 2 == 0) {
    obj2.style.transform = "rotateX(-110deg) scaleX(2.5) scaleY(1.6)";
    obj2.style.transition = "2s";
    obj.style.transform = "rotateX(15deg) scale(2.5)";
    obj.style.transition = "2s";
    hovers.style.visibility = "hidden";
  } else {
    obj.style.transform = "rotateX(-90deg) scale(1)";
    obj.style.transition = "2s";
    obj2.style.transform = "rotateX(-90deg) scale(1)";
    obj2.style.transition = "2s";
  }
};

table.onclick = function scale() {
  sum += 1;
  var obj = document.getElementById("screen");
  var obj2 = document.getElementById("body");

  if (sum % 2 == 0) {
    obj2.style.transform = "rotateX(-110deg) scaleX(2.5) scaleY(1.6)";
    obj2.style.transition = "2s";
    obj.style.transform = "rotateX(15deg) scale(2.5)";
    obj.style.transition = "2s";
    hovers.style.visibility = "hidden";
  } else {
    obj.style.transform = "rotateX(-90deg) scale(1)";
    obj.style.transition = "2s";
    obj2.style.transform = "rotateX(-90deg) scale(1)";
    obj2.style.transition = "2s";
  }
};</script>
</body>
</html>